<template>
  <div>
    <div id="myChart" style="width:50px;height:25px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        grid: {
          left: '0',   // 与容器左侧的距离
          right: '0', // 与容器右侧的距离
          top: '10',   // 与容器顶部的距离
          bottom: '5%', // 与容器底部的距离
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false,
          axisLine: { //y轴
            show: false
          },
          axisTick: { //y轴刻度线
            show: false
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        color: ['#2db7f5'], //折线颜色
        yAxis: {
          show: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          type: 'value',
          splitLine: { show: false },//去除网格线
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 800],
          type: 'line',
          symbol: 'none', //这句就是去掉点的
          itemStyle: {
            color: 'rgba(0, 115, 249, 1)'
          },
          areaStyle: {
            normal: { //填充的颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 115, 249, 0.22)'
              }, {
                offset: 1,
                color: 'rgba(0, 172, 255, 0)'
              }])
            }
          }
        }],
        backgroundColor: "#fff" //背景色
      })
    }
  }
}
</script>

<style>
</style>